<template>
	<view>
		<!-- 如果工资列表为空，显示暂无工资信息 -->
		<view v-if="showTs && salaryList.length === 0" class="no-salary">暂无工资信息</view>
		<!-- 否则显示工资信息列表 -->
		<view v-else>
			<view v-for="salary in salaryList" :key="salary.paymentMonth" class="salary-item"
				@click="goToSalaryDetail(salary)">
				<!-- 显示年份和月份 -->
				<view class="date-info">
					<text class="month">{{ salary.periodMonth }}</text>
					<text class="year">{{ salary.periodYear }}</text>
				</view>
				<!-- 显示工资信息 -->
				<view class="salary-info">
					<text>基本工资（元）: {{ formatNumber(salary.basic) }}</text>
					<text>补贴合计（元）: {{ formatNumber(salary.performance) }}</text>
					<text>应发合计（元）: {{ formatNumber(salary.yfgz) }}</text>
					<text>实发合计（元）: {{ formatNumber(salary.sfgz) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import isHaveBug from "../../../utils/bug";
	import {
		mySalary
	} from "@/api/work/salaryData";
	export default {
		data() {
			return {
				salaryList: [],
				showTs: true,
				isQGsh: true,
				queryParams: {
					pageNum: 1,
					pageSize: 1000,
					params: {
						startDate: "",
						endDate: "",
					},
				},
			};
		},

		methods: {
			fetchSalaryData() {
				mySalary(this.queryParams)
					.then((response) => {
						this.salaryList = response.rows;
						console.log(response.rows);
					})
					.catch((error) => {
						console.error("Error fetching salary data:", error);
					});
			},
			formatNumber(number) {
				if (number){
					let str = number.toFixed(2).toString();
					let parts = str.split('.'); 
					let integerPart = parts[0];
					let decimalPart = parts[1]; // 插入千位分隔符 
					if (this.isQGsh){
						return "￥" + integerPart.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + decimalPart
					}else{
						return "￥" + integerPart
					}
				}else{
					if (this.isQGsh){
						return "￥0.00"
					}else{
						return "￥0"
					}
				}
			},
			goToSalaryDetail(salary) {
				if (!isHaveBug("HR-APP-012")) {
					uni.navigateTo({
						url: `/pages/work/salaryDetails/salaryDetails?salaryData=${JSON.stringify(salary)}`,
					});
				}
			},
		},
		onLoad() {
			if (isHaveBug("HR-APP-009")) {
				this.showTs = false
			}
			if (isHaveBug("HR-APP-011")) {
				this.isQGsh = false
			}
		},
		mounted() {
			this.fetchSalaryData();
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: `/pages/work/sx/sx?startDate=${this.queryParams.params.startDate}&endDate=${this.queryParams.params.endDate}&fields=month`,
				events: {
					timeScreen: (startDate, endDate) => {
						this.queryParams.params.startDate = startDate;
						this.queryParams.params.endDate = endDate;
						this.fetchSalaryData();
					}
				}
			});
		}
	};
</script>

<style>
	/* 无工资信息时的样式 */
	.no-salary {
		text-align: center;
		margin-top: 20px;
		color: #999;
	}

	/* 工资项容器样式 */
	.salary-item {
		display: flex;
		background-color: white;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px 30px;
		border-bottom: 1px solid #eee;
	}

	/* 日期信息容器样式 */
	.date-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		margin-right: 15px;
	}

	/* 工资信息容器样式 */
	.salary-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	/* 年份和月份的样式 */
	.year {
		font-weight: bold;
		font-size: 15px;
		margin-bottom: 5px;
	}

	.month {
		font-weight: bold;
		font-size: 30px;
		margin-bottom: 5px;
	}

	/* 工资项的文本样式 */
	.salary-info text {
		margin-bottom: 5px;
		color: #333;
	}
</style>